<template>
  <border-box title="相关推荐">
    <a-input-search
      placeholder="请输入搜索内容"
      allow-clear
      v-model="queryParam.keyword"
      @search="loadData(1)">
    </a-input-search>
    <a-spin :spinning="loading">
      <div class="list">
        <a-empty v-if="list.length===0"></a-empty>
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="item-content">{{item.contentTitle||item.taskName}}</div>
          <a-icon type="plus-circle" theme="twoTone" style="font-size: 20px;cursor:pointer"
                  @click="add(item)"/>
        </div>
        <a-pagination size="small" @change="loadData" style="text-align: right;margin-top:5px" v-model="queryParam.pageNo"
                      :total="queryParam.total"
                      show-less-items/>
      </div>
      <div class="title" style="margin-top: 10px">添加的内容</div>
      <div class="list">
        <a-empty v-if="addList.length===0" description="暂无添加的内容"></a-empty>
        <div class="item" v-for="(item,index) in addList" :key="index">
          <div class="item-content">{{item.contentTitle||item.taskName}}</div>
          <a-icon type="minus-circle" style="color:red; font-size: 20px;cursor:pointer"
                  @click="del(index)"/>
        </div>
      </div>
    </a-spin>
  </border-box>
</template>

<script>
  //相关推荐
  import BorderBox from "./BorderBox";
  import {getAction} from "@/api/manage";

  export default {
    name: "Recommend",
    components: {BorderBox},
    props: ['params'],
    data() {
      return {
        loading: false,
        queryParam: {
          keyword: '',
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
        url: {
          list: ''
        },
        list: [],
        addList: []
      }
    },
    created() {
      //0:文章，1:活动
      if (this.params.taskType == 0) {
        this.url.list = 'content/contentInfo/list'
      } else {
        this.url.list = 'activity/activityInfo/list'
      }
      this.loadData();
      this.queryAddList();
    },
    methods: {
      loadData(pageNo) {
        if (pageNo) {
          this.queryParam.pageNo = pageNo;
        }
        if (this.params.taskType == 0) {
          this.queryParam.contentTitle = this.queryParam.keyword;
        }else{
          this.queryParam.activityTitle = this.queryParam.keyword;
        }
        this.loading = true;
        getAction(this.url.list, this.queryParam).then(res => {
          if (res.success) {
            this.list = res.result.records;
            this.queryParam.pageNo = res.result.current;
            this.queryParam.total = res.result.total;
          }
        }).catch(error => console.log(error))
          .finally(() => {
            this.loading = false;
          })
      },
      queryAddList() {
        getAction('task/taskInfo/queryRecommend', this.params).then(res => {
          if (res.success) {
            this.addList = res.result;
          }
        })
      },
      selfValidate() {
        const result = this.addList.map(item => item.contentNo);
        return Promise.resolve({key: 'recommand', value: result})
      },
      add(item) {
        this.addList.push(item)
      },
      del(index) {
        this.addList.splice(index, 1)
      }
    }
  }
</script>

<style scoped lang="less">
  .list {
    margin-top: 10px;
    border: 1px solid #ededed;
    padding: 5px;
    border-radius: 5px;
  }

  .item {
    display: flex;
    align-items: center;
    padding: 5px 0;

    &-content {
      flex: 1;
    }
  }

</style>